@import "nib"
@import "_variables"
@import "_util/mixin"
@import "_util/grid"
@import "_util/color"

global-reset()

a
  text-decoration: none

@font-face
  font-family: Roboto
  font-style: normal
  font-weight: 400
  src: url(fonts/Roboto-Regular.ttf) format("truetype")

@font-face
  font-family: Roboto
  font-style: normal
  font-weight: 700
  src: url(fonts/Roboto-Bold.ttf) format("truetype")

body, #container
  overflow-x: hidden
  height: 100%    // make sidebar's sticky work

body
  font: font-size font-sans
  -webkit-text-size-adjust: 100%
  // background: url('../images/tile.png') var(--page-background)
  background: var(--page-background)
  background-size: 240px
  background-blend-mode: overlay    // TODO temporarily
  transition: background trans-style, color trans-style
  &:before
    // TODO rotate the background
    // content: ''
    // position: absolute
    // top: 0
    // left: 0
    // z-index: 10
    // height: 100%
    // width: 100%
    // background-color: none
    // rotate: 30deg

@css {
  #main-grid {
    grid-template-columns: min(30%, var(--sidebar-width)) auto;
    grid-template-rows: auto auto auto;
  }
  #main-grid.right-sidebar {
    grid-template-columns: auto min(30%, var(--sidebar-width));
  }
}

#main-grid
  display: grid
  max-width: page-width
  min-height: 100vh
  grid-template-rows: auto 1fr auto
  margin: auto
  position: relative
  // grid-auto-rows: minmax(0, auto)
  grid-gap: 16px
  #nav
    grid-column-start: 1
    grid-column-end: 3
    transition: height trans-style
  #sidebar-wrapper
    grid-row: 2
    grid-column: 1
  #content-body
    grid-column: 2
    grid-row: 2
    overflow: auto
  #footer-wrapper
    grid-row: 3
    grid-column-start: 1
    grid-column-end: 3
  &.right-sidebar
    #sidebar-wrapper
      grid-column: 2
    #content-body
      grid-column: 1
  @media mq-mobile
    grid-template-columns: auto auto
    #sidebar-wrapper
      grid-row: 3
      grid-column-start: 1
      grid-column-end: 3
      margin-top: 48px
    #content-body
      grid-column-start: 1
      grid-column-end: 3
    #footer-wrapper
      grid-row: 4
  @media mq-tablet
    grid-template-columns: auto auto
    #sidebar-wrapper
      grid-row: 3
      grid-column-start: 1
      grid-column-end: 3
      margin-top: 48px
    #content-body
      grid-column-start: 1
      grid-column-end: 3
    #footer-wrapper
      grid-row: 4

#main
  position: relative

.clear
  clear: both

#container
  position: relative

// shadow
#nav
#sidebar-wrapper
#content-body
#footer-wrapper
#back-to-top-btn
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.01))    // Don't apply this to the parents of the back-to-top buttons

.img-dim
  width: 100%
  height: 100%
  background: var(--img-overlay)
  position: absolute
  transition: background trans-style

::selection
  background-color: var(--selection-bg)

@import "_extend"
@import "_partial/header"
@import "_partial/article"
@import "_partial/comment"
@import "_partial/archive"
@import "_partial/footer"
@import "_partial/highlight"
@import "_partial/back-to-top"
@import "_partial/main-title"
@import "_partial/settings"

if sidebar
  @import "_partial/sidebar"